<template>
  <div class="trace">
    <div class="main">
      <el-card shadow="always" class="Card">
        <div class="cardtitle">密接人员标记地图</div>
        <div id="cardMap"></div>
        <div class="inputWrap">
            <div class="group">
                <div class="cardtext">密接人员</div>&nbsp;
                <el-select v-model="value" clearable placeholder="请选择人员">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                </el-select>
            </div>&nbsp;
            <div class="group">
                <div class="cardtext">密接地点</div>&nbsp;
                <el-input v-model="input" placeholder="请输入地点" />
            </div>&nbsp;
            <div class="group">
                <div class="cardtext">到达时间</div>&nbsp;
                <el-date-picker v-model="value1" type="date" placeholder="请选择时间" />
            </div>
        </div>
        <div class="buttonWrap">
            <el-button type="primary"><el-icon><CirclePlus /></el-icon>&nbsp;&nbsp;打点</el-button>
            <el-button><el-icon><CloseBold /></el-icon>&nbsp;&nbsp;取消</el-button>
            <el-button><el-icon><Delete /></el-icon>&nbsp;&nbsp;删除</el-button>
            <el-button><el-icon><RefreshRight /></el-icon>&nbsp;&nbsp;重置</el-button>
            <el-button type="primary"><el-icon><Compass /></el-icon>&nbsp;&nbsp;生成轨迹</el-button>
        </div>
      </el-card>
      <div class="rightWrap">
            <el-card shadow="always" class="tableWrap">
            <div class="calendarWrap">
                <div style="width: 80px;">密接人员</div>
                <el-select v-model="value" clearable placeholder="请选择密接人员">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                </el-select>&nbsp;&nbsp;
                <el-button type="primary"><el-icon><Search /></el-icon>&nbsp;&nbsp;搜索</el-button>
                <el-button><el-icon><RefreshLeft /></el-icon>&nbsp;&nbsp;重置</el-button>
            </div>
            </el-card >
            <el-card shadow="always" class="tableWrap">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="date" label="时间" align="center" width="180" />
                <el-table-column prop="name" label="姓名" align="center" width="180" />
                <el-table-column prop="address" label="地点" align="center" />
            </el-table>
            </el-card>
        </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";

export default {
  name: 'RegularDuty',
  props: {
    msg: String
  },
  data(){
    return{
      tableData:[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ],
      value:ref(''),
      options:[
        {
            value: '王五',
            label: '王五',
        },
        {
            value: '刘六',
            label: '刘六',
        },
      ]
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let map = new Map({
        basemap: 'osm',
        layers: []
      })
      let view = new MapView({
        map: map,
        center: [113.34, 23.18],
        zoom: 13,
        container: "cardMap",
      })

      const template = {
        // autocasts as new PopupTemplate()
        title: "{name}",
        content: [{
          type: "fields",
          fieldInfos: [
            {
              fieldName: 'account',
              label: '账号'
            },
            {
              fieldName: 'name',
              label: '姓名'
            },
            {
              fieldName: 'phone',
              label: '电话'
            },
            {
              fieldName: 'type',
              label: '类型'
            },
            {
              fieldName: 'message',
              label: '信息'
            }
          ]
        }]
        // content: "{name}"
      };

      // Carbon storage of trees in Warren Wilson College.
      const featureLayer1 = new FeatureLayer({
        url: "https://1.116.87.141:6443/arcgis/rest/services/ny/myCampus/MapServer",
        // popupTemplate: template
      });
      const featureLayer2 = new FeatureLayer({
        url: "https://1.116.87.141:6443/arcgis/rest/services/ny/patients/MapServer/0",
        popupTemplate: template
      });
      const featureLayer3 = new FeatureLayer({
        url: "https://1.116.87.141:6443/arcgis/rest/services/ny/patients/MapServer/1",
        // popupTemplate: template
      });

      map.add(featureLayer1)
      map.add(featureLayer3)
      map.add(featureLayer2)

      view.ui.remove("attribution")
      view.ui.remove("zoom")
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.trace{
  position: absolute;
  left: 12%;
  top: 6%;
  width: 88%;
  height: 94%;
  background-color: rgb(245, 245, 245);
}
.main{
  padding: 15px;
  display: flex;
}

#cardMap{
  width: 100%;
  height: calc(96vh - 270px);
  border: 1px solid saddlebrown;
}
.Card{
  margin: 10px;
  width: 50%;
  height: calc(100vh - 100px);
}
.cardtitle{
  width: 140px;
  margin: 10px;
}
.cardWrap{
  display: flex;
}
.card{
  margin: 10px;
  background-color: rgb(248, 248, 248);
}
.cardtext{
  font-size: 14px;
  width: 120px;
}
.cardnum{
  margin-top: 10px;
  font-size: 20px;
  font-weight: 500;
}
.rightWrap{
  width: 50%;
}
.tableWrap{
  margin: 10px;
}
.calendarWrap{
  display: flex;
  align-items: center;
}
.is-selected {
  color: #1989fa;
}
.calendar{
  position: absolute;
  width: 40%;
  z-index: 2;
}
.inputWrap{
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.group{
    display: flex;
    align-items: center;
    width: 33%;
}
.buttonWrap{
    display: flex;
    margin-top: 20px;
    align-items: center;
}



</style>
